
<!--
 * @Description: 校核
 * @Author: Huang Junjie
 * @Date: 2021-04-13 17:05:40
 * @LastEditTime: 2021-12-24 21:02:45
 * @LastEditors: Huang Junjie
-->
<template>
  <div>
    <base-dialog
      width="980px"
      class="dialog_box"
      :visible.sync="dialog.visible"
      :title="dialog.title"
      :loading="dialog.loading"
      :disabled="dialog.disabled"
      :show-fullscreen-icon="false"
      :show-default-footer="false"
      @open="beforeOpenDialog">
      <el-form
        ref="dataForm"
        :model="dialog.form"
        :rules="rules"
        :disabled="dialog.disabled"
        label-width="0px">
        <table id="look-data">
          <tbody v-for="(item, key) in data" :key="key">
            <tr v-if="item.type ==='text'">
              <td>{{ item.column1 }}</td>
              <td v-if="item.column2">{{ item.column2 }}</td>
              <td v-else>无</td>
              <td>{{ item.column3 }}</td>
              <td v-if="item.column4">{{ item.column4 }}</td>
              <td v-else>无</td>
              <td>{{ item.column5 }}</td>
              <td v-if="item.column6">{{ item.column6 }}</td>
              <td v-else-if="item.column6 === null">无</td>
              <td v-else />
            </tr>
            <tr v-if="item.type ==='textarea'">
              <td>{{ item.column1 }}</td>
              <td v-if="item.column2" colspan="6">{{ item.column2 }}</td>
              <td v-else colspan="6">无</td>
            </tr>
            <tr v-if="item.type ==='file'">
              <td>{{ item.column1 }}</td>
              <td colspan="6" class="file-box">
                <upload-file
                  v-if="dialog.visible && item.column2 && item.column2.length"
                  ref="upload"
                  :model="fileModalPillarImages" />
                <span v-else>无</span>
              </td>
            </tr>
            <tr v-if="item.type ==='file1'">
              <td>{{ item.column1 }}</td>
              <td colspan="6" class="file-box">
                <upload-file
                  v-if="dialog.visible && item.column2 && item.column2.length"
                  ref="upload"
                  :model="fileModalDefectImages" />
                <span v-else>无</span>
              </td>
            </tr>
            <tr v-if="item.type ==='file2'">
              <td>{{ item.column1 }}</td>
              <td colspan="6" class="file-box">
                <upload-file
                  v-if="dialog.visible && item.column2 && item.column2.length"
                  ref="upload"
                  :model="fileModalRectifImagess" />
                <span v-else>无</span>
              </td>
            </tr>
            <tr v-if="item.type ==='textareaInput'">
              <td>{{ item.column1 }}</td>
              <td colspan="6">
                <el-form-item label="" prop="auidtOpinion">
                  <el-input v-model="dialog.form.auidtOpinion" type="textarea" :autosize="{ minRows: 4}" maxlength="500" />
                </el-form-item>
              </td>
            </tr>
          </tbody>
        </table>
      </el-form>
      <div slot="footer" class="base-dialog__footer">
        <el-button
          type="primary"
          @click="updateData('YES')">
          通过
        </el-button>
        <el-button @click="updateData('NO')">
          不通过
        </el-button>
      </div>
    </base-dialog>
  </div>
</template>

<script>
import {
  getInfoByIdDevice,
  jskCheckDevice
} from '@/api/jcwwtk/information'
// import UploadFile from '@/views/jcwsc/components/UploadFile'

export default {
  components: {
    // UploadFile
  },
  props: {
    dialog: {
      type: Object,
      default() {
        return {}
      }
    },
    defectType: { // 类型
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      rules: {
        auidtOpinion: { required: true, message: '请输入', trigger: 'blur' }
      },

      // 查看页面数据
      data: [],

      // 杆号-附件配置
      fileModalPillarImages: {
        title: '',
        visible: false,
        pathList: [],
        fileList: [],
        type: 1,
        bizType: '1',
        key: 0,
        index: 0,
        isDetail: true,
        uploadType: 'file'
      },

      // 缺陷-附件配置
      fileModalDefectImages: {
        title: '',
        visible: false,
        pathList: [],
        fileList: [],
        type: 1,
        bizType: '1',
        key: 0,
        index: 0,
        isDetail: true,
        uploadType: 'file'
      },

      // 整改-附件配置
      fileModalRectifImagess: {
        title: '',
        visible: false,
        pathList: [],
        fileList: [],
        type: 1,
        bizType: '1',
        key: 0,
        index: 0,
        isDetail: true,
        uploadType: 'file'
      },

      detailsData: {} // 接口返回数据
    }
  },
  watch: {
    'dialog.visible'() {
      if (this.dialog.visible) {
        this.data = []
        this.getInfoById(this.dialog.form.id) // 根据id查询信息
      }
    }
  },
  methods: {
    // 根据id查询信息
    getInfoById(id) {
      // 根据id查询信息
      getInfoByIdDevice({
        unitCodeParams: this.dialog.form.unitCodeParams,
        id: id
      }).then(response => {
        this.detailsData = response.data
        response = response.data

        // 组装附件（用于回显）
        var fileArr = []
        if (response.pillarImagesList && response.pillarImagesList.length) {
          response.pillarImagesList.forEach(item => {
            fileArr.push(item.filePath)
          })
          this.showFile(fileArr, 1, 0, 0, true, response.pillarImagesList) // 杆号照片显示附件
        }
        fileArr = []
        if (this.defectType === '1') {
          if (response.defectImagesList && response.defectImagesList.length) {
            response.defectImagesList.forEach(item => {
              fileArr.push(item.filePath)
            })
            this.showFile1(fileArr, 1, 0, 0, true, response.defectImagesList) // 缺陷照片显示附件
          }
        }
        fileArr = []
        if (response.rectifImagesList && response.rectifImagesList.length) {
          response.rectifImagesList.forEach(item => {
            fileArr.push(item.filePath)
          })
          this.showFile2(fileArr, 1, 0, 0, true, response.rectifImagesList) // 整改照片显示附件
        }

        this.data = [
          {
            column1: '线路',
            column2: response.seclineName,
            column3: '区间站场',
            column4: response.siteName,
            column5: '行别',
            column6: response.directionName,
            type: 'text'
          },
          {
            column1: '股道',
            column2: this.trackName,
            column3: '隧道',
            column4: response.tunnelName,
            column5: '支柱号',
            column6: response.pillarNum,
            type: 'text'
          },
          {
            column1: '设备类别',
            column2: response.deviceClassName,
            column3: '缺陷来源',
            column4: response.defectReasonName,
            column5: '缺陷类型',
            column6: response.defectTypeName,
            type: 'text'
          },
          {
            column1: '缺陷等级',
            column2: response.defectGradeName,
            column3: '发现日期',
            column4: response.discoverDate,
            column5: '发现人',
            column6: response.discoverPerson,
            type: 'text'
          },
          {
            column1: '整改期限',
            column2: response.rectifTimeUnitText.indexOf !== '月' ? response.rectifTime + '个月' : response.rectifTime + response.rectifTimeUnitText,
            column3: '责任工区',
            column4: response.solveWorkareaName,
            column5: '缺陷状态',
            column6: response.statusText,
            type: 'text'
          },
          {
            column1: '延期期限',
            column2: response.deferredTime,
            column3: '延期状态',
            column4: '延期' + (response.deferredCount || 0) + '次',
            column5: '延期审核',
            column6: response.deferredStatus === 1 ? '已通过' : '不通过',
            type: response.deferredCount > 0 ? 'text' : null
          },
          {
            column1: '整改日期',
            column2: response.solveDatetime,
            column3: '整改人',
            column4: response.solvePersonal,
            column5: '确认人',
            column6: response.confirmPersonal,
            type: 'text'
          },
          {
            column1: '问题描述',
            column2: response.defectInfoDesc,
            type: 'textarea'
          },
          {
            column1: '整改建议',
            column2: response.rectificationSuggestions,
            type: 'textarea'
          },
          {
            column1: '整改措施',
            column2: response.solveMethod,
            type: 'textarea'
          },
          {
            column1: '杆号照片',
            column2: response.pillarImagesList,
            type: 'file'
          },
          {
            column1: '缺陷照片',
            column2: response.defectImagesList,
            type: 'file1'
          },
          {
            column1: '整改照片',
            column2: response.rectifImagesList,
            type: 'file2'
          },
          {
            column1: '审核意见',
            column2: response.defectInfoDesc,
            type: 'textareaInput'
          }
        ]
      })
    },

    // 杆号照片-显示附件
    showFile(pathList, type, key, index, isDetail, fileList) {
      this.fileModalPillarImages = {
        title: '',
        visible: true,
        pathList: pathList,
        fileList: fileList,
        type,
        bizType: '1',
        key,
        index,
        isDetail: isDetail,
        uploadType: 'file'
      }
    },

    // 缺陷照片-显示附件
    showFile1(pathList, type, key, index, isDetail, fileList) {
      this.fileModalDefectImages = {
        title: '',
        visible: true,
        pathList: pathList,
        fileList: fileList,
        type,
        bizType: '1',
        key,
        index,
        isDetail: isDetail,
        uploadType: 'file'
      }
    },

    // 整改照片-显示附件
    showFile2(pathList, type, key, index, isDetail, fileList) {
      this.fileModalRectifImagess = {
        title: '',
        visible: true,
        pathList: pathList,
        fileList: fileList,
        type,
        bizType: '1',
        key,
        index,
        isDetail: isDetail,
        uploadType: 'file'
      }
    },

    // 回调方法
    updateData(skipFlag) {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.dialog.loading = true
          console.log(this.dialog.form)
          var form = {
            auidtOpinion: this.dialog.form.auidtOpinion,
            defectInfoId: this.dialog.form.id,
            skipFlag: skipFlag // 校核状态 YES：不通过 NO：通过
          }
          jskCheckDevice(form).then(() => {
            this.notifiySuccess('审核成功')
            this.$emit('updateData')
            this.dialog.loading = false
            this.dialog.visible = false
          }).catch(() => {
            this.dialog.loading = false
          })
        }
      })
    },

    // 打开弹框前执行
    beforeOpenDialog() {}
  }
}
</script>

<style lang="scss" scoped>
  #look-data {
    border-collapse: collapse;
    width: 100%;
  }
  #look-data td, #look-data th {
    border: 1px solid #DFE6EC;
    font-size: 16px;
    line-height: 1.5;
    padding: 8px 0;
  }
  #look-data tr td:nth-child(odd){
    width: 15%;
    max-width: 20px;
    padding-left: 0px;
    padding-right: 10px;
    text-align: right;
    background: #E9F2FC;
  }
  #look-data tr td:nth-child(even){
    max-width: 20px;
    padding-left: 10px;
    padding-right: 10px;
    word-wrap: break-word;
    overflow: hidden;
  }
  .dialog_box #look-data tr td.file-box {
    width: 100%;
    text-align: left;
    background: #ffffff;
  }
  #look-data .file-content {
    min-height: 187px;
  }
  ::v-deep .el-dialog {
    .el-dialog__body {
      min-height: calc(80vh - 100px) !important;
      .el-form-item {
        margin-bottom: 0px;
      }
      .is-error.el-form-item {
        margin-bottom: 10px;
      }
      .rectif-datetime {
        .el-select .el-input {
          width: 80px;
        }
        .el-input-group__prepend {
          background-color: #fff;
        }
      }
    }
  }
</style>
